<template>
    <view class="user-com">
        <view class="list-title">
            <slot />
        </view>
        <view class="user-list">
            <div class="list-search">
                <u-search placeholder="请输入人名" v-model="userName" animation bgColor="#fff"></u-search>
            </div>

            <view v-for="item in userList" :key="item.uerId" class="user-item">
                <view class="user-img">
                    {{ item.userName.slice(0, 1).toUpperCase() }}
                </view>
                <view class="text">
                    <view class="text-h">{{ item.userName }}</view>
                    <view class="text-t">
                        <text>电话：{{ item.phonenumber }}</text>
                        <text>邮箱：{{ item.email }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { withDefaults } from 'vue'
const props = withDefaults(defineProps<{ userList: any }>(),
    {
        userList: [],
        checked: false
    }
)

const userName = ref('')
const userList = computed(() => {
    let arr = props.userList
    if (userName.value) {
        arr = props.userList.filter(item => {
            return item.userName.includes(userName.value)
        })
    }
    return arr
})

</script>

<style lang="scss" scoped>
.user-com {}

.user-list {
    .list-search {
        padding: 10px;
    }

    .user-item {
        background: #fff;
        margin-bottom: 1px;
        padding: 10px;
        display: flex;
        align-items: center;

        .user-img {
            width: 46px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            background: #f2f2f2;
            border-radius: 46px;
            font-size: 26px;
            color: $u-type-primary;
        }

        .text {
            padding-left: 10px;
            flex: 1;

            .text-h {
                font-size: 16px;
                padding-bottom: 3px;
            }

            .text-t {
                text {
                    font-size: 12px;
                    opacity: 0.7;
                    padding-right: 10px;
                }
            }
        }
    }

}
</style>
